<template>
  <div>
    <div class="container">
      <div class="from">
        <h3 class="title">登录</h3>
        <div class="box">
            <el-form :model="from">
              <el-form-item>
                  <el-input v-model="from.user" placeholder="请输入用户名" clearable></el-input>
              </el-form-item>
                <el-form-item>
                  <el-input v-model="from.pwd" placeholder="请输入密码" clearable show-password></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="submitForm" style="width:100%;" >登录</el-button>
              </el-form-item>
            </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Message} from 'element-ui'
export default {
    data() {
        return {
            from: {
                user:'',
                pwd:'',
            },
        }
    },
    methods: {
        submitForm() {
            let {user,pwd} = this.from
            if(user==='admin'&&pwd==='admin')
            {
                Message.success('登陆成功！')
                sessionStorage.setItem('login',true)
                this.$router.push('/index')
            }
            else if(user===''||pwd==="")
            {
                 Message.error('账号或密码不能为空')
            }else{
                Message.error('账号或密码错误')
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.from {
  width: 400px;
  height: 300px;
  background-color: #fff;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 45%;
  box-shadow: 11px 12px 9px 3px #ddd;
  border-radius: 1rem;
  padding: 1rem 0.5rem;
}
.title {
  text-align: center;
  margin: 2rem auto;
  color: #333;
}
.box{
//  background-color:red;
padding: 0 2rem;
}
</style>
